<template>
	<view class="yuncang-goods-box bg-white e-flex " @tap="jump">
		<view class="e-m-r-20">
			<load-image mode="aspectFill" size="200rpx" :src="getGoodsObj(goods, goodsKeys.image)" />
		</view>

		<view class="yuncang-goods e-flex-1 overflow-hidd">
			<view class=" e-flex-1 e-flex" :class="[priceShow ? ' e-flex-items-start e-flex-between e-flex-y' :'']">
				<view class="e-flex  e-flex-items-start " :class="{'e-flex-1':!priceShow}" style="width:100%">
					<view class="e-line-2 e-flex-1 overflow-hidd" >
						<text  style="font-size: 36rpx;">{{ getGoodsObj(goods, goodsKeys.name) }}</text>
					</view>
					
					<view class="e-flex-1 text-right white-nowrap ">x{{ stock  }}</view>
				</view>
			
				<view class="yuncang-goods-price e-font-32" v-if="priceShow">{{$unitEn}}{{ getGoodsObj(goods, goodsKeys.price) }}</view>
			</view>
			
			
			<view class="e-flex e-flex-row e-flex-items-center e-flex-end"  v-if="showPickup">
				<button @click="toPickup(goods)" class="reset-btn buy-btn btn border-primary" style="line-height: 64rpx;min-height: 64rpx;font-size: 30rpx;margin: 0;margin-top: 20rpx;">提货</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			goods:Object,
			priceShow:{
				type:Boolean,
				default:true
			},
			isJump:{
				type:Boolean,
				default:false
			},
			// 商品信息的键值
			goodsKeys: {
				type: Object,
				default: () => {
					return {
						image: 'coverImg',
						price: 'price',
						name: 'name',
						qty: 'stock',
					}
				}
			},
			goodsId:[String,Number],
			stock:[String,Number],
			showPickup:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			// 回显商品信息
			getGoodsObj(goods, key) {
				let keyArray = key.split('.')
				let value = goods
				keyArray.forEach(v => {
					value = value[v]
				})
				return value
			},
			jump () {
				this.isJump && this.$goTo('/pages/yuncang/goods/index',{
					id: this.goodsId || this.goods.id
				})
			},
			toDetail(goods){
				this.$goTo('/pages/yuncang/goods/index?id=' + goods?.id)
			},
			toPickup(goods){
				this.$goTo('/pages/yuncang/pickup?id=' + goods?.id)
			}
		}
	}
</script>

<style lang="scss">
	.yuncang-goods-box {
		padding: 20rpx 30rpx;
		.yuncang-goods {
			height: 200rpx;
			&-price {
				color: #474f59;
			}
		}
	}
	
	.buy-btn{
		background-color: red;
		color: white;
		&.border-primary{
			background-color: #fff;
			border-color: #F5222D!important;
			border: 1rpx solid;
			color: #F5222D!important;
			border-radius: 99rpx;
			min-width: 5rem;
		}
	}
</style>
